<template>
  <div>
    <div id="topdiv">
      <div id="bb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>业主信息管理</el-breadcrumb-item>
          <el-breadcrumb-item>宠物管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div id="vv">
        <el-button
          size="mini"
          type="primary"
          @click="loadme()"
          class="el-icon-refresh"
        ></el-button>
      </div>
    </div>
    <hr />
    <div id="we">
      <!-- <h2>UserInfo to java 2005</h2> -->
      <el-form :inline="true" :model="likeFrom" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input
            style="width: 300px"
            placeholder="输入宠物的名字、品种或主人名称"
            v-model="likeFrom.likestr"
            v-on:change="onLikeFindPet()"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属小区">
          <el-select
            :value="likeFrom.comName"
            :label="likeFrom.comName"
            @change="upcomm($event)"
          >
            <el-option
              v-for="item in comms"
              :key="item.id"
              :label="item.comName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onLikeFindPet" class="el-icon-thumb"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div id="div1">
      <div id="div2">
        <el-button
          size="mini"
          type="danger"
          slot="reference"
          @click="delAnyPet"
          class="el-icon-delete"
          >批量删除</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="addonepet()"
          class="el-icon-circle-plus-outline"
          >添加</el-button
        >
      </div>
      <div id="div3">
        <h5>
          共有数据:<a type="primary">{{ pets.length }}</a>
        </h5>
      </div>
    </div>

    <el-table
      :data="pets.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
      tooltip-effect="dark"
      @selection-change="handleSelectionChangepet"
    >
      <el-table-column
        type="selection"
        width="55"
        style="border-right: 1px solid gray"
      >
      </el-table-column>
      <el-table-column align="center" label="ID" prop="id"></el-table-column>

      <el-table-column
        align="center"
        label="名字"
        prop="pname"
      ></el-table-column>

      <el-table-column label="照片" align="center">
        <template slot-scope="scope">
          <el-popover
            align="left"
            placement="top-start"
            title=""
            trigger="hover"
          >
            <img
              :src="scope.row.petimg"
              alt=""
              style="width: 150px; height: 150px"
            />
            <img
              class="llimg"
              slot="reference"
              :src="scope.row.petimg"
              style="width: 40px; height: 40px; margin-top: 4px"
            />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="颜色"
        prop="color"
      ></el-table-column>
      <el-table-column
        align="center"
        label="品种"
        prop="kind"
      ></el-table-column>
      <el-table-column
        align="center"
        label="描述"
        prop="pdesc"
      ></el-table-column>
      <el-table-column
        align="center"
        label="收养时间"
        prop="pdate"
      ></el-table-column>
      <el-table-column align="center" label="所属小区" prop="owner">
        <template slot-scope="scope">
          {{ scope.row.owner.community.comName }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="所属人员" prop="house">
        <template slot-scope="scope">
          {{ scope.row.owner.uname }}
        </template></el-table-column
      >

      <el-table-column
        align="center"
        label="创建时间"
        prop="certime"
      ></el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scopeme" width="240px">
          <i class="el-icon-edit" @click="updatepet1(scopeme.row)"></i>
          &nbsp; &nbsp;
          <i class="el-icon-delete" @click="delonepet(scopeme.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pets.length"
      >
      </el-pagination>
    </div>

    <!-- 模态窗体 -->
    <div class="mod">
      <el-dialog
        title="修改宠物信息"
        :visible.sync="dialogFormVisible3"
        width="50%"
        style="height: 900px"
        close-on-click-modal="false"
      >
        <div id="modbody">
          <el-form :model="uppet" label-width="100px">
            <el-form-item label="" style="height: 120px">
              <template id="upimg">
                <el-popover
                  align="left"
                  placement="top-start"
                  title=""
                  trigger="hover"
                >
                  <img
                    :src="uppet.petimg"
                    alt=""
                    style="width: 150px; height: 150px"
                  />
                  <img
                    class="upimg"
                    slot="reference"
                    :src="uppet.petimg"
                    @click="uploadimg()"
                    style="width: 100px; height: 100px"
                  />
                </el-popover>
                <div id="upimgdiv" style="clear: both">
                  <el-upload
                    class="avatar-uploader"
                    action="http://localhost:8086/uploadimg"
                    accept="image/jpg, image/jpeg,image/png, image/tmp"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <el-button type="success" plain round size="mini"
                      >更新照片</el-button
                    >
                  </el-upload>
                </div>
              </template>
            </el-form-item>

            <div style="height: 150px; float: left; margin-left: -220px">
              <el-form-item label="ID" style="clear: both">
                <el-input
                  v-model="uppet.id"
                  readonly="true"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="名字" style="clear: both">
                <el-input v-model="uppet.pname" autocomplete="off"></el-input>
              </el-form-item>
            </div>

            <el-form-item
              label="所属小区"
              style="clear: both; margin-left: 50px"
            >
              <el-select
                :value="uppet.owner.community.comName"
                @change="upcomm2($event)"
              >
                <el-option
                  v-for="item in comms"
                  :key="item.id"
                  :label="item.comName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="所属主人">
              <el-select
                :value="uppet.owner.uname"
                @change="upowner2($event)"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in owners"
                  :key="item.id"
                  :label="item.uname"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="品种" style="margin-left: 50px">
              <el-input v-model="uppet.kind" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="颜色">
              <el-input v-model="uppet.color" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="收养时间" style="margin-left: 50px">
              <el-date-picker
                v-model="uppet.pdate"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="创建时间">
              <el-date-picker
                v-model="uppet.certime"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="描述" style="margin-left: 50px">
              <el-input
                style="width: 240%"
                type="textarea"
                v-model="uppet.pdesc"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入内容"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div id="footermod">
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible3 = false">取 消</el-button>
            <el-button
              type="primary"
              @click="updatepet2()"
              style="margin-left: 40px"
              >确 定</el-button
            >
          </span>
        </div>
      </el-dialog>
    </div>

    <!-- add模态窗体 -->
    <div class="mod">
      <el-dialog
        title="修改宠物信息"
        :visible.sync="dialogFormVisiblepetadd"
        width="50%"
        style="height: 900px"
        close-on-click-modal="false"
      >
        <div id="modbody">
          <el-form :model="addpet" label-width="100px">
            <el-form-item label="" style="clear: both; margin-left: 300px">
              <el-upload
                style="float: left; margin-left: -20px"
                class="avatar-uploader"
                action="http://localhost:8086/uploadimg"
                accept="image/jpg, image/jpeg,image/png, image/tmp"
                :show-file-list="false"
                :on-success="addpetImg"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="addpet.petimg"
                  :src="addpet.petimg"
                  class="avatar"
                  style="width: 120px; height: 120px"
                />
                <i
                  style="
                    width: 120px;
                    height: 120px;
                    border: 1px dashed #d9d9d9;
                    border-radius: 6px;
                    background-color: aliceblue;
                    font-size: 28px;
                    color: #8c939d;
                    line-height: 120px;
                    text-align: center;
                  "
                  v-else
                  class="el-icon-plus avatar-uploader-icon"
                ></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="名字">
              <el-input v-model="addpet.pname" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="所属小区">
              <el-select
                :value="addpet.owner.community.comName"
                @change="upcommpet3($event)"
              >
                <el-option
                  v-for="item in comms"
                  :key="item.id"
                  :label="item.comName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="品种">
              <el-input v-model="addpet.kind" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="所属主人">
              <el-select
                :value="addpet.owner.uname"
                @change="upowner3($event)"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in owners"
                  :key="item.id"
                  :label="item.uname"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="颜色">
              <el-input v-model="addpet.color" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="收养时间">
              <el-date-picker
                v-model="addpet.pdate"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="描述">
              <el-input
                style="width: 240%"
                type="textarea"
                v-model="addpet.pdesc"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入内容"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div id="footermod">
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisiblepetadd = false"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="addonepet2()"
              style="margin-left: 40px"
              >确 定</el-button
            >
          </span>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogTableVisible: false,
      formLabelWidth: "120px",
      currentPage: 1, //初始页
      pagesize: 5, //每页的数据

      dialogFormVisible3: false, //开关模态窗体的状态

      dialogFormVisiblepetadd: false,

      likeFrom: {
        likestr: "",
        comId: 0,
        comName: "选择小区",
      },
      uppet: {
        id: "",
        panme: "",
        color: "",
        petimg: "",
        kind: "",
        pdesc: "",
        pdate: "",
        certime: "",
        own_id: "",
        owner: {
          uname: "s",
          community: {
            comName: "",
            id: "",
          },
        },
      },
      addpet: {
        id: "",
        panme: "",
        color: "",
        petimg: "",
        kind: "",
        pdesc: "",
        pdate: "",
        certime: "",
        own_id: "",
        owner: {
          uname: "",
          community: {
            comName: "万盛小区",
            id: 1,
          },
        },
      },
      pets: [],
      owners: [],
      comms: [
        {
          id: 1,
          comName: "状元壹号",
        },
        {
          id: 2,
          comName: "状元2s号",
        },
      ],

      multipleSelection: [],
    };
  },
  // 该模块内部创建成时执行created事件
  created: function () {
    this.findComm();
    this.$axios
      .get("/pet/pets")
      .then((res) => {
        if (res.data.code == 200) {
          this.pets.length = 0; //清空原有数组内容
          this.pets = res.data.data; //在空数组追加相应的数据
          console.log(res.data);
        } else {
          this.$message(res.data.msg);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },

  methods: {
    loadme: function () {
      location.reload();
    },

    handleAvatarSuccess(res, file) {
      console.log(res);
      this.uppet.petimg = res.data;
      this.$message({
        message: "头像上传成功!",
        type: "success",
      });
    },

    addpetImg(res, file) {
      console.log(res);
      this.addpet.petimg = res.data;
      this.$message({
        message: "图片上传成功!",
        type: "success",
      });
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },

    // 小区拉框 改变
    upcomm(event) {
      for (let i = 0; i < this.comms.length; i++) {
        if (this.comms[i].id == event) {
          this.likeFrom.comId = event;
          this.likeFrom.comName = this.comms[i].comName;
        }
      }
      this.onLikeFindPet();
    },

    upcomm2(event) {
      this.findOwnersByComm(event);
      this.uppet.owner.uname = "选择主人";
      this.uppet.owner.id = 0;
      for (let i = 0; i < this.comms.length; i++) {
        if (this.comms[i].id == event) {
          this.uppet.own_id = event;
          this.uppet.owner.community.id = event;
          this.uppet.owner.community.comName = this.comms[i].comName;
        }
      }
    },

    upcommpet3(event) {
      this.findOwnersByComm(event);
      this.addpet.owner.uname = "选择主人";
      this.addpet.owner.id = 0;
      for (let i = 0; i < this.comms.length; i++) {
        if (this.comms[i].id == event) {
          this.addpet.own_id = event;
          this.addpet.owner.community.id = event;
          this.addpet.owner.community.comName = this.comms[i].comName;
        }
      }
    },
    upowner2(event) {
      for (let i = 0; i < this.owners.length; i++) {
        if (this.owners[i].id == event) {
          this.uppet.owner.id = event;
          this.uppet.own_id = event;
          this.uppet.owner.uname = this.owners[i].uname;
        }
      }
    },

    upowner3(event) {
      for (let i = 0; i < this.owners.length; i++) {
        if (this.owners[i].id == event) {
          this.addpet.owner.id = event;
          this.addpet.own_id = event;
          this.addpet.owner.uname = this.owners[i].uname;
        }
      }
    },
    findOwnersByComm(comId) {
      this.owners.length = 0;
      this.$axios
        .get("/owner/findOwnersByComm?comId=" + comId)
        .then((res) => {
          if (res.data.code == 200) {
            this.owners = res.data.data;
            console.log(this.owners);
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    findComm() {
      this.comms.length = 0;
      this.$axios
        .get("/comm/findComm")
        .then((res) => {
          if (res.data.code == 200) {
            this.comms = res.data.data;
            console.log(this.comms);
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    onLikeFindPet: function () {
      this.$axios
        .post("/pet/findLike", {
          comId: this.likeFrom.comId,
          likestr: this.likeFrom.likestr,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.pets = res.data.data;
            console.log(this.pets);
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    updatepet1: function (r) {
      for (let i = 0; i < this.pets.length; i++) {
        if (this.pets[i].id == r.id) {
          this.uppet = this.pets[i];
        }
      }
      //alert(this.uppet.community.id);

      this.findOwnersByComm(this.uppet.owner.community.id);

      // 显示模态窗体
      this.dialogFormVisible3 = true;
      console.log("this.uppet:::::::::");
      console.log(this.uppet);
    },

    updatepet2: function () {
      if (this.uppet.own_id == null) {
        this.$message({
          showClose: true,
          message: "请选择所属主人",
          type: "warning",
        });
      } else {
        console.log("updatepet2");
        console.log(this.uppet);
        // 像后端发出修改请求
        this.$axios
          .put("/pet/update", {
            id: this.uppet.id,
            pname: this.uppet.pname,
            petimg: this.uppet.petimg,
            color: this.uppet.color,
            kind: this.uppet.kind,
            pdesc: this.uppet.pdesc,
            pdate: this.uppet.pdate,
            certime: this.uppet.certime,
            own_id: this.uppet.own_id,
          })
          .then((res) => {
            // 修改成功
            if (res.data.code == 200) {
              // 修改成功后，遍历列表数组，用修改的对象数据更新原有数组中同id的对象数据
              for (var i = 0; i < this.pets.length; i++) {
                if (this.pets[i].id == this.uppet.id) {
                  this.pets[i].pname = this.uppet.pname;
                  this.pets[i].petimg = this.uppet.petimg;
                  this.pets[i].color = this.uppet.color;
                  this.pets[i].kind = this.uppet.kind;
                  this.pets[i].pdesc = this.uppet.pdesc;
                  this.pets[i].pdate = this.uppet.pdate;
                  this.pets[i].certime = this.uppet.certime;
                  this.pets[i].own_id = this.uppet.own_id;
                  this.pets[i].owner.id = this.uppet.own_id;
                  this.pets[
                    i
                  ].owner.community.comName = this.uppet.owner.community.comName;
                }
              }
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "success",
              });
              this.dialogFormVisible3 = false;
            } else {
              alert(res.data.msg);
            }
          })
          .catch((error) => {
            alert("修改异常");
          });
      }
    },

    delonepet: function (r) {
      //  alert("del  " + i + " " + r.id + "  ");
      if (confirm("确认要删除？" + r.id)) {
        this.$axios
          .get("/pet/delone?id=" + r.id)
          .then((res) => {
            if (res.data.code == 200) {
              for (let i = 0; i < this.pets.length; i++) {
                if (this.pets[i].id == r.id) {
                  this.pets.splice(i, 1);
                }
              }
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "success",
              });
            } else {
              alert(res.data.msg);
            }
          })
          .catch((error) => {
            alert("出现异常");
          });
      } else {
      }
    },

    handleSelectionChangepet(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },

    delAnyPet() {
      let idStr = "";
      for (let i = 0; i < this.pets.length; i++) {
        for (let j = 0; j < this.multipleSelection.length; j++) {
          if (this.pets[i].id == this.multipleSelection[j].id) {
            idStr += this.multipleSelection[j].id + ",";
          }
        }
      }

      if (confirm("您确定删除吗?")) {
        this.$axios
          .get("/pet/delAny?idStr=" + idStr)
          .then((res) => {
            if (res.data.code == 200) {
              for (let i = 0; i < this.pets.length; i++) {
                for (let j = 0; j < this.multipleSelection.length; j++) {
                  if (this.pets[i].id == this.multipleSelection[j].id) {
                    this.pets.splice(i, 1);
                  }
                }
              }
              this.$message({
                message: "删除成功！",
                type: "success",
              });
            } else {
              this.$message({
                message: "删除失败！",
                type: "error",
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },

    addonepet() {
      //查询成员
      this.findOwnersByComm(this.addpet.owner.community.id);
      // 显示模态窗体
      this.dialogFormVisiblepetadd = true;
    },

    addonepet2() {
      if (this.addpet.owner.id === 0) {
        this.$message({
          showClose: true,
          message: "请选择所属主人",
          type: "warning",
          center: true,
        });
      } else if (this.addpet.pname === "" || this.addpet.pname === null) {
        this.$message({
          showClose: true,
          message: "请输入名字",
          type: "warning",
          center: true,
        });
      } else {
        // 像后端发出修改请求
        this.$axios
          .post("/pet/add", {
            pname: this.addpet.pname,
            petimg: this.addpet.petimg,
            color: this.addpet.color,
            kind: this.addpet.kind,
            pdesc: this.addpet.pdesc,
            pdate: this.addpet.pdate,
            certime: this.addpet.certime,
            own_id: this.addpet.own_id,
          })
          .then((res) => {
            // 增加成功
            if (res.data.code == 200) {
              console.log(res.data);
              this.pets.push(res.data.data);
              console.log(res.data.data);
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "success",
              });

              this.dialogFormVisiblepetadd = false;

              this.$delete(this.addpet.owner, "id");
              this.$delete(this.addpet, "pname");
              this.$delete(this.addpet, "petimg");
              this.$delete(this.addpet, "color");
              this.$delete(this.addpet, "kind");
              this.$delete(this.addpet, "certime");
              this.$delete(this.addpet, "pdate");
              this.$delete(this.addpet, "pdesc");
              // //清空某个对象的值
              // Object.keys(this.addpet).forEach(
              //   (key) => (this.addpet[key] = "")
              // );
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "warning",
              });
            }
          })
          .catch((error) => {
            alert("新增异常");
          });
        this.dialogFormVisiblepetadd = false;
      }
    },
  },
};
</script>
<style>
#upimgdiv .el-upload,
#upimgdiv .el-button,
#upimgdiv {
  height: 20px;
  width: 80px;
  margin: 4px 4px;
  line-height: 0px;
}
#div1 {
  height: 50px;
  line-height: 50px;
}
#topdiv {
  height: 50px;
}
#div2 {
  float: left;
}
#div3 {
  float: right;
  line-height: 20px;
}
#p1 {
  font-size: 15px;
  float: left;
}

#we {
  height: 50px;
  line-height: 30px;
  font-size: 18px;
}
#vv {
  line-height: 30px;
  float: right;
}
#divtable .el-table__header th,
#divtable .el-table__header tr {
  background-color: beige;
}
#bb {
  margin-top: 10px;
  float: left;
}
#divtable {
  line-height: 40px;
}
#sou {
  height: 34px !important;
}
.mod .el-form-item {
  float: left;
  margin-left: 20px;
  width: 400px;
}
.upimg {
  float: left;
}
.mod .el-date-picker,
.mod .el-input {
  float: left;
}
.mod .el-select {
  float: left;
  margin-left: 0;
}
.mod .el-input,
.mod .el-select {
  width: 300px;
}
.mod .el-dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  height: 68%;
  overflow: hidden;
}
.mod .el-dialog__body {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 100px;
  bottom: 0;
  right: 0;
  padding: 0;
  z-index: 1;
  overflow: hidden;
  overflow-y: auto;
}
.mod .el-dialog__title {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 34px;
  bottom: 0;
  right: 0;
  padding: 0;
  z-index: 1;
  overflow: hidden;
  overflow-y: auto;
}
.mod #footermod {
  width: 100%;
  height: 80px;
  position: absolute;
  clear: both;
  bottom: 60px;
}
.mod #footermod .el-button {
  width: 150px;
  margin-right: 30px;
}

.el-table__header th,
.el-table__header tr {
  padding: 0px 0px;
  color: black;
  line-height: 76px;
  font-size: 18px;
}
.addmod .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  background-color: aliceblue;
  width: 120px;
  height: 120px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.addmod .avatar-uploader .el-upload:hover {
  border-color: #409eff;
  width: 120px;
  height: 120px;
}
.addmod .avatar-uploader-icon {
  width: 120px;
  height: 120px;
  font-size: 28px;
  color: #8c939d;
  line-height: 120px;
  text-align: center;
}
.addmod .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
